<tr class="client_detail_row">
  <td colspan="7" class="client_wrapper">
    <div class="client_container">
      <div class="client_container_top">
        <div class="top_corner"></div>
        <div class="cross_btn"></div>
      </div>

      <div class="client_row_content">
        <div class="client_bal">
          <div class="bal_box">
            <h2 class="orange"><%= number_to_currency(@detail[:outstanding_amount], unit: @client.currency.present? ? @client.currency.unit : "$") %></h2>

            <p><%= t('views.clients.outstanding_amount') %></p>
          </div>
          <div class="bal_box center">
            <h2 class="blue"><%= number_to_currency(@detail[:amount_billed], unit: @client.currency.present? ? @client.currency.unit : "$") %></h2>

            <p><%= t('views.clients.total_amount_billed') %></p>
          </div>
          <div class="bal_box">
            <h2><%= number_to_currency(@detail[:payments], unit: @client.currency.present? ? @client.currency.unit : "$") %></h2>

            <p><%= t('views.clients.total_payments_received') %></p>
          </div>
        </div>

        <div class="client_invoices primary">
          <h2>Invoices</h2>
          <%= link_to 'New Invoice', "invoices/new?invoice_for_client=#{params[:id]}", class: 'client_new_invoice' %>
          <div class="grid_table top">
            <table cellpadding="0" cellspacing="0" class="table table_listing invoice_listing">
              <colgroup>
                <col class="one"/>
                <col class="two"/>
                <col class="three"/>
                <col class="four"/>
              </colgroup>
              <th class="align_left"><%= t('invoice') %>. #</th>
              <th class="align_left"><%= t('views.invoices.due_date') %></th>
              <th class="align_left"><%= t('company') %></th>
              <th class="align_right"><%= t('amount') %></th>
            </table>
          </div>
          <!--grid_table-->

          <div class="scrollContainer content_scroll mCustomScrollbar">
            <div class="grid_table btm mCustomScrollBox mCS-light">
              <table cellpadding="0" cellspacing="0" class="table table_listing invoice_listing mCSB_container">
                <colgroup>
                  <col class="one"/>
                  <col class="two"/>
                  <col class="three"/>
                  <col class="four"/>
                </colgroup>
                <tbody>
                <% if @invoices.blank? %>
                    <tr>
                      <td class="align_left" colspan="4"><%= t('views.invoices.no_invoice_found') %></td>
                    </tr>
                <% else %>
                    <% @invoices.each do |invoice| %>
                        <tr>
                          <td class="align_left"><%= link_to invoice.invoice_number, invoice_path(invoice), target: '_blank' %></td>
                          <td class="align_left"><%= (invoice.due_date || invoice.invoice_date) rescue "" %></td>
                          <td class="align_left"><%= invoice.company.company_name %></td>
                          <td class="align_right"><%= number_to_currency(invoice.invoice_total, unit: invoice.currency.present? ? invoice.currency.unit : "$") %></td>
                        </tr>
                    <% end %>
                <% end %>
                </tbody>
              </table>
            </div>
          </div>
          <!--grid_table-->
        </div>

        <div class="client_invoices">
          <h2>Payments</h2>
          <%= link_to "New Payment",
                      "/invoices/unpaid_invoices?for_client=#{params[:id]}", "data-toggle" => "modal", "data-target" => "#myModal",
                      :class => 'client_new_payment', :remote => true %>
          <div class="grid_table top">
            <table cellpadding="0" cellspacing="0" class="table table_listing invoice_listing">
              <colgroup>
                <col class="one"/>
                <col class="two"/>
                <col class="three"/>
                <col class="four"/>
              </colgroup>
              <th class="align_left"><%= t('invoice') %>. #</th>
              <th class="align_left"><%= t('views.invoices.due_date') %></th>
              <th class="align_left"><%= t('company') %></th>
              <th class="align_right"><%= t('amount') %></th>
            </table>
          </div>
          <!--grid_table-->

          <div class="scrollContainer content_scroll mCustomScrollbar">
            <div class="grid_table btm mCustomScrollBox mCS-light">
              <table cellpadding="0" cellspacing="0" class="table table_listing invoice_listing mCSB_container">
                <colgroup>
                  <col class="one"/>
                  <col class="two"/>
                  <col class="three"/>
                  <col class="four"/>
                </colgroup>
                <tbody>
                <% if @payments.blank? %>
                    <tr>
                      <td class="align_left" colspan="4"><%= t('views.payments.no_payment_found') %></td>
                    </tr>
                <% else %>
                    <% @payments.each do |payment| %>
                        <tr>
                          <% if payment.payment_type == "credit" %>
                              <td class="align_left"><%= payment.payment_reference %></td>
                          <% else %>
                              <td class="align_left"><%= link_to payment.payment_reference, invoice_path(payment.invoice), class: 'invoices_link', target: '_blank' rescue "" %></td>
                          <% end %>
                          <td class="align_left"><%= payment.payment_date %></td>
                          <td class="align_left"><%= payment.company.try(:company_name) %></td>
                          <td class="align_right payment_amount"><%= content_tag(:span, '* ') if payment.payment_method == "Credit" %><%= "#{number_to_currency(payment.payment_amount, unit: payment.invoice.currency.present? ? payment.invoice.currency.unit : "$")}" %></td>
                        </tr>
                    <% end %>
                <% end %>
                </tbody>
              </table>
            </div>
          </div>
          <!--grid_table-->
        </div>
      </div>
    </div>
  </td>
</tr>
